html,
body {
  height: 100%;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  color: #333;
  font-size: 15px;
  background: #fefefe;
  background: linear-gradient(#fefefe 0%, #dbe5e7 100%);
  background-attachment: fixed;
}
@mixin circle_center($size, $bg) {
  $half: calc($size / 2);
  position: absolute;
  left: 50%;
  top: 50%;
  width: $size;
  height: $size;
  margin: $half * -1 0 0 $half * -1;
  border-radius: 50%;
  background: $bg;
}
@mixin split_line() {
  position: absolute;
  top: 50%;
  margin-top: -1px;
  width: 100%;
  height: 0;
  border-width: 1px 0;
  border-style: solid;
  border-top-color: #3c3d3f;
  border-bottom-color: #666768;
}
.container {
  width: 230px;
  height: 230px;
  margin: 40px auto 0;
  .de {
    user-select: none;
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.1);
    background: transparent;
    .den {
      position: absolute;
      width: 220px;
      height: 220px;
      border-radius: 50%;
      background: #888;
      margin: -110px 0 0 -110px;
      left: 50%;
      top: 50%;
      box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.6),
        0 2px 20px rgba(255, 255, 255, 1);
      background-image: radial-gradient(ellipse at center, #888, #333);
      .line {
        z-index: 1;
        @include split_line();
        &:nth-child(1) {
          transform: rotate(-60deg);
        }
        &:nth-child(2) {
          transform: rotate(60deg);
        }
      }
      .switch {
        z-index: 3;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        label {
          z-index: 2;
          cursor: pointer;
          position: absolute;
          top: 50%;
          left: 50%;
          width: 50%;
          height: 70px;
          margin-top: -35px;
          transform-origin: 0 50%;
          &::before,
          &::after {
            content: "";
            position: absolute;
            left: 1px;
            width: 100%;
            height: 30px;
          }
          &::before {
            bottom: 6px;
            transform: rotate(30deg);
          }
          &::after {
            top: 6px;
            transform: rotate(-30deg);
          }

          span {
            z-index: 2;
            position: absolute;
            top: 0;
            right: 0;
            width: 40px;
            height: 100%;
            font-weight: bold;
            font-size: 15px;
            line-height: 70px;
            text-align: center;
            color: #eee;
            text-shadow: 0 1px 0 #444;
            transition: all 0.5s;
          }
          &:nth-of-type(1) {
            transform: rotate(-90deg);
            span {
              right: 2px;
              font-size: 13px;
              transform: rotate(90deg);
            }
          }
          @for $i from 2 through 6 {
            &:nth-of-type(#{$i}) {
              $angle: calc(($i - 1) * 60deg - 90deg);
              transform: rotate($angle);
              span {
                transform: rotate($angle * -1);
              }
            }
          }
        }

        input {
          position: absolute;
          opacity: 0;
          visibility: hidden;
        }
        #switch_off:checked {
          & ~ .light {
            transform: rotate(-90deg);
          }
          & ~ .dot {
            transform: rotate(-90deg);
          }
        }
        @for $i from 1 through 5 {
          #switch_#{$i}:checked {
            & ~ .light {
              transform: rotate(calc($i * 60deg - 90deg));
            }
            & ~ .dot {
              transform: rotate(calc($i * 60deg - 90deg));
            }
            & ~ label[for="switch_#{$i}"] {
              span {
                color: #0ff;
                text-shadow: 0 0 5px transparentize(#0ff, 0.1),
                  0 0 10px transparentize(#0ff, 0.2),
                  0 0 20px transparentize(#0ff, 0.3),
                  0 0 30px transparentize(#0ff, 0.4),
                  0 0 50px transparentize(#0ff, 0.7),
                  0 0 100px transparentize(#0ff, 0.8),
                  0 0 150px transparentize(#0ff, 0.9);
              }
            }
          }
        }

        div {
          position: absolute;
          top: 50%;
          left: 50%;
        }

        .light {
          z-index: 1;
          width: 50%;
          height: 100px;
          margin-top: -50px;
          transform-origin: 0 50%;
          transform: rotate(-90deg);
          transition: all 0.5s;
          span {
            position: absolute;
            top: 0;
            left: 15px;
            width: 100px;
            height: 100px;
            background: radial-gradient(
              circle at 30% 50%,
              rgba(184, 163, 204, 1) 0%,
              rgba(159, 197, 224, 0.42) 42%,
              rgba(111, 113, 179, 0) 72%,
              rgba(67, 34, 137, 0) 100%
            );
            opacity: 1;
            pointer-events: none;
            clip-path: polygon(20% 50%, 100% 0, 100% 100%);
            filter: blur(10px);
          }
        }

        .dot {
          z-index: 6;
          width: 50%;
          height: 12px;
          margin-top: -6px;
          transform-origin: 0 50%;
          transition: all 0.5s;
          span {
            position: absolute;
            top: 0;
            left: 30px;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: linear-gradient(#dae2e4, #ecf5f4);
          }
        }

        .dene {
          @include circle_center(140px, linear-gradient(#f2f6f5, #cbd5d6));
          .denem {
            @include circle_center(120px, linear-gradient(#cbd5d6, #f2f6f5));
            .deneme {
              @include circle_center(100px, linear-gradient(#eef7f6, #8d989a));
              box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.6),
                0 8px 20px rgba(0, 0, 0, 0.9);
              z-index: 5;
            }
          }
        }
      }
    }
  }
}
